<style>
    iframe.icon-font-demo {
        width: 100%;
        border: 0;
        height: 2000px;
        background: #fff;
    }

    .main-box {
        padding: 0 !important;
        position: relative;
    }

    .icon-type-el{
        margin-left: 100px;
    }
    .icon-type-el iframe {
        margin-top: -243px;
        margin-left: -200px;
        margin-bottom: -198px;
    }

    .icon-type-asw iframe {
        margin-top: -554px;
        margin-bottom: -170px;
    }

    .page-footer-copyright {
        display: none;
    }

    .icon-type-box {
        overflow: hidden;
    }
    .icon-type-loading{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
    }
    .icon-type-loading .el-loading-spinner{
        top:300px;
    }

</style>
<template>
    <ly-page>
        <ly-navi
                :items="{'/basic/icon_font?type=project':'自定义图标', '/basic/icon_font?type=asw': 'Awesome图标','/basic/icon_font?type=el': 'el图标'}"
                type="tab" ></ly-navi>
        <ly-page-content>
            <!--<el-divider content-position="left">el图标库</el-divider>-->
            <!--<a   target="_blank"  href="https://element.eleme.cn/#/zh-CN/component/icon">https://element.eleme.cn/#/zh-CN/component/icon</a>-->
            <!--<el-divider content-position="left">Font Awesome 图标库</el-divider>-->
            <!--<a target="_blank" href="http://www.fontawesome.com.cn/faicons/">http://www.fontawesome.com.cn/faicons/</a>-->
            <!--<ly-code-view>-->
            <!--<pre v-pre>-->
            <!--<i class="fa fa-xxx"></i>-->
            <!--</pre>-->
            <!--</ly-code-view>-->
            <!--<el-divider content-position="left">自定义图标库</el-divider>-->
            <div class="icon-type-box" :class="['icon-type-'+type]">
                <iframe v-if="type=='project'" class="icon-font-demo"
                        src="http://cdn.source.magcloud.net/icon/lyadmin/index.html"></iframe>
                <iframe style="width: 1140px;"  v-if="type=='el'" class="icon-font-demo"
                        src="https://element.eleme.cn/#/zh-CN/component/icon"></iframe>
                <iframe v-if="type=='asw'" class="icon-font-demo" src="http://www.fontawesome.com.cn/faicons/"></iframe>
            </div>
            <div v-if="loading" class="icon-type-loading" v-loading="loading">

            </div>
        </ly-page-content>
    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    type: 1,
                    loading:false
                }
            },
            init: function (query) {
                var me=this;
                me.loading=true;
                this.type = query.type;
                setTimeout(function () {
                    me.loading=false;
                },1000);
            },
            mounted: function () {

            },
            methods: {}
        }
    })
</script>